
<ion-header>
    <ion-toolbar class="b-b-shaow" color="winter">
        <ion-buttons left>
            <button (click)="goBack()" ion-button icon-only>
                <ion-icon name="arrow-back"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title align-title="center">首单激活</ion-title>
    </ion-toolbar>
</ion-header>


<ion-content>

  <!--<ion-label class="text-gray first-tip">购买首单商品，激活账号</ion-label>-->

    <div class="cart-tip">
        <i class="iconfont icon-gouwuche-tips-laba"></i>
        <span>首购单用于新会员注册和老会员激活</span>
    </div>
    <!--套餐-->
    <div class="cart-sort" *ngFor="let item of packageList;let i = index">
        <ion-grid class="cart-package-title">
            <ion-row class="cart-package">
                <ion-col class="check" col-1>
                    <!--<ion-checkbox [(ngModel)]="item.isCheck" [disabled]="true" (click)="updateCheck(item,'package')"></ion-checkbox>-->
                    <!-- <div [ngClass]="{'order-check':true,checked:item.isCheck,disabled:'item.disabled'}" (click)="updateCheck(item,'package')">
                        <div class="order-check-inner"></div>
                    </div> -->
                </ion-col>
                <ion-col>
                    &yen;&nbsp;{{item.FP_PRICE}}&nbsp;{{item.PRODUCT_NAME}}
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid class='cart-main package-main'>
            <ion-row >
                <ion-col col-3 (click)="goGoodsDetail(item)">
                    <img  [src]="imgUrl+item.IMAGE_LINK" onerror='this.src="assets/img/null-img.png"'  class="small-pic">
                </ion-col>
                <ion-col class="p-l-0" (click)="goGoodsDetail(item)">
                    <ion-row>
                        <ion-col col-12 class='p-l-0'>
                              <span class="name">
                                  {{item.PRODUCT_NAME}}
                              </span>
                        </ion-col>
                        <ion-col col-12 class='p-l-0'>
                              <span class="pv">
                                  PV: +${{item.FP_PV}}
                              </span>
                        </ion-col>
                        
                    </ion-row>
                </ion-col>
                <ion-col col-3 class="no-padding text-right package-row">
                    <ion-row>
                        <ion-col col-12 class="price">
                            &yen;&nbsp;{{item.FP_PRICE}}
                        </ion-col>
                        <ion-col col-12 class="number text-gray">
                            ×&nbsp;1
                        </ion-col>
                        <ion-col col-12 class='p-1-0'>
                                <div   (click)='addCart(item,i,"package")' class='colorpick colorpick1'><i class="iconfont i-add iconcart"></i></div>
                          </ion-col>
                    </ion-row>
                     
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>

    <!--单品-->
    <div class="cart-sort">
      <ion-grid class='cart-main' *ngFor="let item of goodsList;let i = index">
          <ion-row>
              <!-- <ion-col col-1>
                   <div [ngClass]="{'order-check':true,checked:item.isCheck,disabled:item.disabled}" (click)="updateCheck(item,'single')">
                      <div class="order-check-inner"></div>
                  </div>
              </ion-col> -->
              <ion-col col-4 (click)="goGoodsDetail(item)">
                  <img  [src]="imgUrl+item.IMAGE_LINK" onerror='this.src="assets/img/null-img.png"'  class="pic">
                  <!--[src]="item.IMAGE_LINK"-->
              </ion-col>
              <ion-col class="p-l-0">
                  <ion-row (click)="goGoodsDetail(item)">
                      <ion-col col-12 class='p-l-0'>
                          <span class="name">
                              {{item.PRODUCT_NAME}}
                          </span>
                      </ion-col>
                      <ion-col col-12 class='p-l-0'>
                            <span class="color" *ngIf='item.SHOES_COLOUR!=""&&item.SHOES_SIZE!=""' >
                                {{item.SHOES_COLOUR}};{{item.SHOES_SIZE}}
                            </span>
                        </ion-col>
                      <ion-col col-12 class='p-l-0'>
                          <span class="pv">
                              PV: +${{item.FP_PV}}
                          </span>
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col col-6 class='p-0 text-red'>
                          &yen;&nbsp;{{item.FP_PRICE}}
                      </ion-col>
                      <ion-col col-6 class='p-0 no-padding'>
                            <div  (click)='addCart(item,i,"single")' class='colorpick'><i class="iconfont i-add iconcart"></i></div>
                      </ion-col>
                  </ion-row>
              </ion-col>
          </ion-row>
      </ion-grid>
  </div>



</ion-content>


<ion-footer class='cart-footer'>
  <!-- 全选结算 -->
  <ion-toolbar>
    <div class="type-main clearfix">
            <div class="type-btn pull-right" (click)='shopList()'>
                    购物清单({{shopArray.length}})
           </div>
      <div class="total pull-right">
        <div class="number">合计：&yen;{{settleTotal.money}}</div>
        <div class="pv">PV: +${{settleTotal.Pv}}</div>
      </div>
    </div>
  </ion-toolbar>
</ion-footer>
<div class ="bg-model bg-model1" *ngIf="model==1">
        　　<div class = 'model-box'>
                <h3 class="b-b"><img  class="pic" onerror='this.src="assets/img/null-img.png"'  [(src)]="cartImg">  
                  <div class='top'>
                     <div class='title1'>{{PRODUCT_NAME}}</div>
                     <div class='title-mony'>¥{{FP_PRICE}}</div>  
                     <div class='tittle-type'>{{select_type}}</div> 
                  </div>
                  <i (click)='closeModal()' class="icon-gouwuche-tips-guanbi iconfont"></i></h3>
                <div class="content">
                    <div class='title'> 颜色分类</div> 
                    
                      <div class="box">
                          <div *ngFor='let item of colorGroup1; let i = index' class="flex1" > 
                            
                             <ion-item>
                                <ion-label>{{item.name}}</ion-label>
                                <ion-checkbox  [(checked)]='item.checked' [(disabled)]='item.disabled' (click)="updateCucumber(item.checked,i)" [(ngModel)]="item.checked"></ion-checkbox>
                              </ion-item>
                            
                          </div>
                          
                            <div class="clear"></div>
                      </div>
                      
                   
                      <div class='title title-size'> 尺码</div> 
                    
                      <div class="box">
                          <div *ngFor='let item of sizeGroup1; let i = index' class="flex1" >  
                              <ion-item>
                                  <ion-label>{{item.name}}</ion-label>
                                  <ion-checkbox   [(checked)]='item.checked' [(disabled)]='item.disabled' (click)="sizeCucumber(item.checked,i)" [(ngModel)]="item.checked"></ion-checkbox>
                                </ion-item>
                          </div>
                      </div>
                      <div class="clear"></div>
                     
                    <ion-row *ngIf=false class="bg-white m-t p" >
                          <ion-col col-6 class='f-1-5'>商品数量</ion-col>
                          <ion-col col-6>
                            <div>
                              <span class="num-container">
                                  <label class="reduce" (click)="reduce(item,i)"><i class="iconfont icon-gouwuche-shuliangjian"></i></label>
                                  <input type="number" class="number" value="{{item.QTY}}" [(ngModel)]="item.QTY" (ngModelChange)="inputCheck(item)" >
                                  <label class="add" (click)="add(item)"><i class="iconfont icon-gouwuche-shuliangjia"></i></label>
                                </span>
                            </div>
                          </ion-col>
                    </ion-row>
                </div>
                <div class="footer b-t">
                    
                    <button class="footer-btn"  (click)="confirm()">确定</button>
                </div>
        　　</div>
        </div>
        <div class ="bg-model bg-model1 bg-model2" *ngIf="lists==true">
            　<div class = 'model-box'>
                <div class="b-b"> 
                 <div class="caculate">
                   <div class="number">合计：&yen;{{settleTotal.money}}</div>
                    <div class="pv">PV: +${{settleTotal.pv}}</div>
                 </div>
                  <div class='top'>
                    <div class="type-btn pull-right" (click)='settle()'>
                      结算({{checkIds.length}})
                    </div>  
                  </div>
                  <i (click)='closeModal()' class="icon-gouwuche-tips-guanbi iconfont"></i>
                </div>
                <div class="content">
                    <div *ngIf='packageArray.length>0'>
                        <ion-grid class='cart-main'  *ngFor="let item of packageArray;let i = index;">
                                <ion-row>
                                  <ion-col col-1>
                                        <ion-checkbox [ngClass]="{'order-check':true,checked:item.isCheck}"   [(ngModel)]="item.isCheck" (click)="updateCheck(item,item.type)"></ion-checkbox>
                                  </ion-col>
                                  <ion-col col-4 (click)="goGoodsDetail(item)">
                                    <img   [src]="imgUrl+item.IMAGE_LINK" onerror='this.src="assets/img/null-img.png"' class="pic">
                                  </ion-col>
                                  <ion-col>
                                    <ion-row (click)="goGoodsDetail(item)">
                                      <ion-col col-12 class='p-l-0'>
                                        <span class="name">
                                          {{item.PRODUCT_NAME}}
                                        </span>
                                      </ion-col>
                                      <ion-col col-12 class='p-l-0'>
                                        <span class="color" *ngIf='item.SHOES_COLOUR!=""&&item.SHOES_SIZE!=""' >
                                            {{item.SHOES_COLOUR}};{{item.SHOES_SIZE}}
                                        </span>
                                    </ion-col>
                                      <ion-col col-12 class='p-l-0'>
                                        <span class="pv">
                                          PV: +${{item.MP_PV}}
                                        </span>
                                      </ion-col>
                                    </ion-row>
                                    <ion-row>
                                      <ion-col col-6 class='p-0 text-red'>
                                        &yen;&nbsp;{{item.FP_PRICE}}
                                      </ion-col>
                                      <ion-col col-6 class='p-0'>
                                        <div class="del-btn" (click)='delHandle(item,i)'>
              
                                          <i class='iconfont icon-shanchu'></i>
                                  
                                        </div>
                                        <span class="num-container">
                                          <label class="reduce" (click)="reduce(item,i)"><i class="iconfont icon-gouwuche-shuliangjian"></i></label>
                                          <input type="number" class="number" value="{{item.QTY}}" [(ngModel)]="item.QTY"  (ngModelChange)="inputCheck(item)" >
                                          <label class="add" (click)="add(item)"><i class="iconfont icon-gouwuche-shuliangjia"></i></label>
                                        </span>
                                      </ion-col>
                                    </ion-row>
                                  </ion-col>
                                </ion-row>
                     </ion-grid>
                     </div>
                     <div *ngIf='shopArray.length>0'></div>
                    <ion-grid class='cart-main'  *ngFor="let item of shopArray;let i = index;">
                        <ion-row>
                          <ion-col col-1>
                                <ion-checkbox [ngClass]="{'order-check':true,checked:item.isCheck}"   [(ngModel)]="item.isCheck" (click)="updateCheck(item,item.type)"></ion-checkbox>
                          </ion-col>
                          <ion-col col-4 (click)="goGoodsDetail(item)">
                            <img   [src]="imgUrl+item.IMAGE_LINK" onerror='this.src="assets/img/null-img.png"' class="pic">
                          </ion-col>
                          <ion-col>
                            <ion-row (click)="goGoodsDetail(item)">
                              <ion-col col-12 class='p-l-0'>
                                <span class="name">
                                  {{item.PRODUCT_NAME}}
                                </span>
                              </ion-col>
                              <ion-col col-12 class='p-l-0'>
                                <span class="color" *ngIf='item.SHOES_COLOUR!=""&&item.SHOES_SIZE!=""' >
                                    {{item.SHOES_COLOUR}};{{item.SHOES_SIZE}}
                                </span>
                            </ion-col>
                              <ion-col col-12 class='p-l-0'>
                                <span class="pv">
                                  PV: +${{item.MP_PV}}
                                </span>
                              </ion-col>
                            </ion-row>
                            <ion-row>
                              <ion-col col-6 class='p-0 text-red'>
                                &yen;&nbsp;{{item.FP_PRICE}}
                              </ion-col>
                              <ion-col col-6 class='p-0'>
                                <div class="del-btn" (click)='delHandle(item,i)'>
      
                                  <i class='iconfont icon-shanchu'></i>
                          
                                </div>
                                <span class="num-container">
                                  <label class="reduce" (click)="reduce(item,i)"><i class="iconfont icon-gouwuche-shuliangjian"></i></label>
                                  <input type="number" class="number" value="{{item.QTY}}" [(ngModel)]="item.QTY"  (ngModelChange)="inputCheck(item)" >
                                  <label class="add" (click)="add(item)"><i class="iconfont icon-gouwuche-shuliangjia"></i></label>
                                </span>
                              </ion-col>
                            </ion-row>
                          </ion-col>
                        </ion-row>
                      </ion-grid>
                      </div>
                 </div> 
        </div>